<template>
  <el-row class="wrap">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/dashboard' }"
          >首页</el-breadcrumb-item
        >
        <el-breadcrumb-item>链上信息</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <!-- <el-col :span="24" class="wrap-main">
      <el-form size="small" :inline="true">
        <el-form-item label="文件名">
          <el-input v-model="filename" placeholder="请输入文件名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryChain">联盟链查询</el-button>

        </el-form-item>
      </el-form>
    </el-col> -->

    <el-col :span="24" class="wrap-main">
      <el-form size="small" :inline="true">
        <el-form-item label="文件名">
          <el-input v-model="filename" placeholder="请输入文件名"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="historyquery">溯源查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="文件名" width="200" />
      <el-table-column prop="size" label="文件大小" width="200" />
      <el-table-column prop="uptime" label="时间" width="200" />
      <el-table-column prop="owner" label="操作用户" width="200" />
      <el-table-column prop="operation" label="操作" />
    </el-table>

    <!-- 分页 -->
    <!-- :page-size="5"默认一页显示5条数据 -->
    <!-- page-sizes="[5, 10, 15, 20]"可以用来选择一页显示多少条数据 -->

    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="allTableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <el-dialog
      title="查链结果展示"
      :visible.sync="dialogVisible"
      width="50%"
      center
      :before-close="handleClose"
    >
      <el-table :data="gridData">
        <el-table-column
          property="name"
          label="文件名"
          width="150"
        ></el-table-column>
        <el-table-column
          property="size"
          label="文件大小"
          width="200"
        ></el-table-column>
        <el-table-column property="uptime" label="时间"></el-table-column>
        <el-table-column property="owner" label="操作用户"></el-table-column>
        <el-table-column property="operation" label="操作"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </el-row>
</template>

<script >

  import API1 from '../../api/api_chain'

  export default {
    name: "List",
    data() {
      return {
        // 溯源查询
        tableData:[],
        // 最新查询
        gridData: [{          
          name: '',
          size: '',
          uptime: '',
          owner: '' ,
          operation: ''      
        }],
        number: 0,
        filename: '',
        dialogVisible: false,
        uploadData: {},
        uploadHeaders: {Authorization: ''},
        // 默认当前页为第一页
        currentPage: 1,
        pageSize: 5,
        allTableData:[],
        
      }
    },
    methods: {
      // 根据分页设置的数据控制每页显示的数据条数及页码跳转页面刷新
      getPageData(){
        let start = (this.currentPage - 1)*this.pageSize;
        let end = start + this.pageSize;
        this.tableData = {}
        this.tableData = this.allTableData.slice(start,end);
        console.log(this.tableData)
      },
      // 显示一页多少条数据
      handleSizeChange(val){
        console.log(`每页${val} 条`)
        this.pageSize = val;
        this.getPageData();
      },
      // 选择当前是第几页
      handleCurrentChange(val){
        console.log(`当前页: ${val}`)
        this.currentPage = val;
        this.getPageData();
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
            this.gridData.splice(this.index)
          })
          .catch(_ => {});
      },
      // 查链函数
      queryChain: function() {
        let params = {
          key: this.filename,
        }
        API1.query(params).then(res => {
          console.log(res)
          if(res.code != 0){
            this.$message.error(res.msg)
          }else{
            res = res.msg
            console.log(res)
            const newline = {                
              name: res.name,
              size: res.size,
              uptime: res.uptime,
              owner: res.owner,
            }
            this.index++
            this.gridData.push(newline)
            this.dialogVisible=true 

          }
        })
        .catch(error => {
           console.log(error)
        })

      },
      //溯源函数
      historyquery: function() {
        let params = {
          key: this.filename,
        }
        API1.historyquery(params).then(res => {
          console.log(res)
          if(res.code != 0){
            this.$message.error(res.msg)
          }else{
            console.log(res.msg.length);
            this.allTableData = res.msg;
            console.log(this.allTableData)
            // 把table中的allTableData换成tableData
            // 46-54注释取消
            // this.getPageData();打开

            this.getPageData();
          }
        })
        .catch(error => {
           console.log(error)
        })
      }
      

     
    }

  }
</script>

<style scoped>
</style>
